<template>
  <div class="card-layout">
    <div class="card-title">
      <h2 class="card-title-txt">我的Card</h2>
    </div>
    <div class="cardList">
      <div class="cardListItem" v-for="(item, index) in listData" key="index">
        <div class="innerItem">
          <div class="top">
            <div class="icon">
              <Icon type="android-bus" size="20" color="#fff" style="line-height: 32px;"></Icon>
            </div>
            <div class="content">
              <h3>{{item.cardFlowTitle}}</h3>
              <p class="date">08-09 14:59</p>
              <p class="content-text">326</p>
              <div class="detail">
                <span class="start">沿河大道硚口码头</span>
                <span>>></span>
                <span class="end">香港路紫藤花园</span>
              </div>
              <span class="income">即将到达沿河大道硚口码头</span>
            </div>
          </div>
          <div class="bottom">
            <div class="left">{{item.buttonOneName}}</div>
            <div class="right">{{item.buttonTwoName}}</div>
          </div>
        </div>
        <!--遮罩-->
        <div class="shadebox">
          <div class="shade"></div>
          <div class="btnbox">
            <Button class="xiajia" type="primary" @click="deleteCard(item, index)">下架</Button>
            <Button class="update" type="primary" @click="updateCard(item)">修改</Button>
          </div>
        </div>
      </div>
    </div>
    <div class="card-title">
      <h2 class="card-title-txt">可配置Card</h2>
    </div>
    <div class="cardList">
      <div class="cardListItem">
        <div class="innerItem">
          <div class="top">
            <div class="icon">
              <Icon type="android-bus" size="20" color="#fff" style="line-height: 32px;"></Icon>
            </div>
            <div class="content">
              <h3>${City}公交·到站提醒</h3>
              <p class="date">YYYY-MM-DD hh:mm:ss</p>
              <p class="content-text">${BusRouteNo}</p>
              <div class="detail">
                <span class="start">${StartStation}</span>
                <span>>></span>
                <span class="end">${EndStation}</span>
              </div>
              <span class="income">即将到达${CurrentStation}</span>
            </div>
          </div>
          <div class="bottom">
            <div class="left">${ActionName1}</div>
            <div class="right">${ActionName2}</div>
          </div>
        </div>
        <!--遮罩-->
        <div class="shadebox">
          <div class="shade"></div>
          <Button class="addBtn" type="primary" @click="formShow = true">添加</Button>
        </div>
      </div>
    </div>
    <Modal class="model" v-model="formShow" width="800" @click="reset('cardForm')">

      <h2 slot="header" class="model-title">到站提醒Card</h2>
      <Form ref="cardForm" :rules="rules" :model="cardForm" :label-width="106">
        <div class="formbox">
          <div class="left">
            <Form-item label="card类型：">
              <Select v-model="cardForm.cardFlowTypeId" placeholder="请选择card类型">
                <Option v-for="(item, index) in cardFlowTypeData" :value="item.id" :key="index">{{item.name}}</Option>
              </Select>
            </Form-item>
            <Form-item prop="cardFlowTemplateId" label="模板id：">
              <Input v-model="cardForm.cardFlowTemplateId" placeholder="请填写模板id"></Input>
            </Form-item>
            <Form-item prop="cardFlowTitle" label="标题名：">
              <Input v-model="cardForm.cardFlowTitle" placeholder="请输入标题名"></Input>
            </Form-item>
            <Form-item prop="buttonOneName" label="按钮1名称：">
              <Input v-model="cardForm.buttonOneName" placeholder="请输入按钮1名称"></Input>
            </Form-item>
            <Form-item prop="buttonOneUrl" label="按钮1链接：">
              <Input v-model="cardForm.buttonOneUrl" placeholder="请输入按钮1链接"></Input>
            </Form-item>
            <Form-item prop="buttonTwoName" label="按钮2名称：">
              <Input v-model="cardForm.buttonTwoName" placeholder="请输入按钮2名称"></Input>
            </Form-item>
            <Form-item prop="buttonTwoUrl" label="按钮2链接：">
              <Input v-model="cardForm.buttonTwoUrl" placeholder="请输入按钮2链接"></Input>
            </Form-item>
          </div>
          <div class="right">
            <div class="cardListItem">
              <div class="innerItem">
                <div class="top">
                  <div class="icon">
                    <Icon type="android-bus" size="20" color="#fff" style="line-height: 32px;"></Icon>
                  </div>
                  <div class="content">
                    <h3>{{cardForm.cardFlowTitle}}</h3>
                    <p class="date">2017-08-16 00:00:00</p>
                    <p class="content-text">728</p>
                    <div class="detail">
                      <span class="start">傅家坡客运站</span>
                      <span>>></span>
                      <span class="end">邓家村停车场</span>
                    </div>
                    <span class="income">即将到达邓家村停车场</span>
                  </div>
                </div>
                <div class="bottom">
                  <div class="left">{{cardForm.buttonOneName}}</div>
                  <div class="right">{{cardForm.buttonTwoName}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Form>
      <div slot="footer" style="text-align: center;">
        <Button type="ghost" size="large" @click="reset('cardForm')">取消</Button>
        <Button type="primary" size="large" @click="submitForm('cardForm')">提交</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import qs from 'qs'
  export default {
    data () {
      return {
        listData: [], // card列表数据
        cardFlowTypeData: [], // card流类型数据
        formShow: false, // 添加弹框
        cardForm: {
          cardFlowId: '',
          cardFlowTypeId: '',
          cardFlowTitle: '',
          buttonOneName: '',
          buttonTwoName: '',
          buttonOneUrl: '',
          buttonTwoUrl: '',
          cardFlowTemplateId: '',
          userId: '',
          alipayClientInfoId: ''
        },
        rules: {
          cardFlowTemplateId: [
            {required: true, message: '请填写模板id', trigger: 'blur'}
          ],
          cardFlowTitle: [
            {required: true, message: '请填写标题名称', trigger: 'blur'}
          ],
          buttonOneName: [
            {required: true, message: '请填写按钮1的名称', trigger: 'blur'}
          ],
          buttonTwoName: [
            {required: true, message: '请填写按钮2的名称', trigger: 'blur'}
          ],
          buttonOneUrl: [
            {required: true, message: '请填写按钮1链接', trigger: 'blur'}
          ],
          buttonTwoUrl: [
            {required: true, message: '请填写按钮2链接', trigger: 'blur'}
          ]
        }
      }
    },
    mounted () {
      this.result()
      this.getCardFlowType()
    },
    methods: {
      result () {
        // 查询所有配置的card流
        let that = this
        let url = that.api.card.list
        let searchData = {}
        searchData.alipayClientInfoId = localStorage.getItem('dataId') || '8'
        this.$axios.get(url, { params: searchData }).then((res) => {
          let code = res.data.msg.code
          let data = res.data.data
          for (let i = 0, len = data.length; i < len; i++) {
            data[i].cardFlowId = data[i].id
          }
          if (code === '20000') {
            that.listData = data
          } else {
            that.$Message.error({content: '网络异常', duration: 5})
          }
        }).catch((err) => {
          if (err) throw err
          that.$Message.error({content: '网络异常', duration: 5})
        })
      },
      getCardFlowType () {
        // 获取card流类型
        let that = this
        let url = that.api.card.getCardType
        this.$axios.get(url, { params: {} }).then((res) => {
          let code = res.data.msg.code
          let data = res.data.data
          console.log(code)
          console.log(data)
          if (code === '20000') {
            that.cardFlowTypeData = data
          } else {
            that.$Message.error({content: '网络异常', duration: 5})
          }
        }).catch((err) => {
          if (err) throw err
          that.$Message.error({content: '网络异常', duration: 5})
        })
      },
      submitForm (formName) {
        // 提交表单
        let that = this
        let url = that.api.card.add
        that.cardForm.alipayClientInfoId = localStorage.getItem('dataId') || '8'// 前置配置项id
        that.cardForm.userId = localStorage.getItem('loginId') || '34'// 用户id
        that.$refs[formName].validate((valid) => {
          if (valid) { // 通过验证
            that.$Modal.confirm({
              title: '提示',
              content: '是否继续?',
              onOk: () => {
                that.$axios.post(url, qs.stringify(that.cardForm)).then((res) => {
                  let code = res.data.msg.code
                  if (that.cardForm.cardFlowId) {
                    // 修改
                    if (code === '20000') {
                      that.$Message.info({content: '修改成功', duration: 5})
                      // 用修改后的数据替换修改前的数据
                      for (let i = 0, len = that.listData.length; i < len; i++) {
                        if (that.listData[i].id === that.cardForm.id) {
                          that.listData[i] = that.cardForm
                        }
                      }
                      console.log(that.listData)
                      that.formShow = false
                    } else {
                      that.$Message.error({content: '网络异常', duration: 5})
                    }
                  } else {
                    // 新增
                    that.cardForm.cardFlowId = res.data.data
                    if (code === '20000') {
                      that.$Message.info({content: '新增成功', duration: 5})
                      that.listData.push(that.cardForm)
                      console.log(that.listData)
                      that.formShow = false
                    } else {
                      that.$Message.error({content: '网络异常', duration: 5})
                    }
                  }
                }).catch((err) => {
                  if (err) throw err
                  that.$Message.error({content: '网络异常', duration: 5})
                })
              },
              onCancel: () => {}
            })
          } else { // 未通过验证
            console.log('error')
          }
        })
      },
      reset (formName) {
        // 取消提交
        this.$refs[formName].resetFields()
        this.formShow = false
      },
      deleteCard (object, index) {
        // 删除card流
        let that = this
        let url = that.api.card.delete
        that.$Modal.confirm({
          title: '提示',
          content: '此操作将删除这个card, 是否继续?',
          onOk: () => {
            that.$axios.post(url, qs.stringify({cardFlowId: object.cardFlowId})).then((res) => {
              let code = res.data.msg.code
              // let data = res.data.data
              console.log(res.data)
              if (code === '20000') {
                that.$Message.info({content: '删除成功', duration: 5})
                that.listData.splice(index, 1)
                console.log(that.listData)
                that.formShow = false
              } else {
                that.$Message.error({content: '网络异常', duration: 5})
              }
            }).catch((err) => {
              if (err) throw err
              that.$Message.error({content: '网络异常', duration: 5})
            })
          },
          onCancel: () => {}
        })
      },
      updateCard (object) {
        // 修改card流
        this.formShow = true
        this.cardForm = object
      }
    }
  }
</script>
